<template>
  <m-modal
    v-model="visible"
    v-clickoutside="handleCancel"
    :width="234"
    class="v-choose-element"
    :title='title'
    :left="x"
    :top="y"
    :showFooter="false"
    @cancel="handleCancel"
  >
    <div>
      <div class="g-tc">
        <a-input-search
          v-model="keyWord"
          placeholder="搜索关键字"
          size="small"
          enter-button
          style="width: 211px;margin:10px" />
      </div>

      <div class="_content">
        <div v-if="listFilterd.length===0" class="g-tc">
          无匹配项
        </div>

        <a-collapse v-model="activeKey" expand-icon-position="right" @change="handleChange">
          <template #expandIcon="{ isActive }">
            <div>
              <img src="statics/icons/app/arrowdown12.svg" class="_collapse-icon" :class="{_expand:isActive}">
            </div>
          </template>
          <a-collapse-panel
            v-for="(group,groupIndex) in listFilterd"
            :key="groupIndex+''"
            :header="group.label"
            :disabled="false"
            :forceRender="true">
            <div v-for="(item,index) in group.children" :key="index" class="_item g-one-line" @click="handleClickItem(item)">
              <img :src="item.icon" style="position: relative;top: -3px;width:16px;height:16px" class="g-m-r-4 g-m-l-8"/>
              <span>{{item.label}}</span>
            </div>
          </a-collapse-panel>
        </a-collapse>
      </div>
    </div>
  </m-modal>
</template>
<script>
import CustomModal from 'src/components/common/CustomModal';
import { Portal } from 'src/components/common/Portal.vue';
import Clickoutside from 'src/components/common/ContextMenu/clickoutside';

const comp = {
  name: 'choose-element',
  components: {
    'm-modal': CustomModal,
  },
  props: {
    title: String,
    x: Number,
    y: Number,
    list: Array, //// [[{label:'',value:'',icon:'',children:[]}]] //// 第一层为分组，一组的元素会出现分割线，后期考虑做分组title，第二层为用于选择的元素
  },
  directives: {
    Clickoutside,
  },
  data() {
    return {
      keyWord: '',
      visible: false,
      hasClicked: false,
      activeKey: ["0", "1", "2"],
    };
  },
  computed: {
    listFilterd() {
      //// let list =
      //// 	this.list[0].label === '最近使用'
      //// 	  ? this.list.slice(1, this.length)
      //// 	  : this.list;
      let list = this.list;
      if (!this.keyWord) return list;
      return list.map(group => {
        return {
          ...group,
          children: group.children.filter(item => item.label.includes(this.keyWord))
        };
      }).filter(i => i.children.length > 0);
      //// else {
      ////   const listFilterd = [];
      ////   list.forEach((group) => {
      ////     const matchs = group.children.filter((i) =>
      ////       i.label.includes(this.keyWord)
      ////     );

      ////     if (matchs.length) {
      ////       listFilterd.push({ ...group, children: matchs });
      ////     }
      ////   });
      ////   return listFilterd;
      //// }
    },
  },
  beforeMount() {},
  mounted() {
    this.visible = true;
  },
  methods: {
    handleOk(key) {
      this.visible = false;

      this.$emit('sure', key);
    },
    handleCancel() {
      console.log('click out');
      this.visible = false;
      this.$emit('close');
    },

    handleClickItem(item) {
      if (this.hasClicked) return;
      this.hasClicked = true;
      this.handleOk(item);
    },
    handleChange(data) {
      console.log(data);
    },
  },
};

export default comp;
export const chooseElement = new Portal(comp);
export const portal = chooseElement;
</script>
<style lang="scss" scoped>
.v-choose-element {
	/deep/ .ant-input-search-button {
		color: #414f58;
		background: linear-gradient(
			180deg,
			#e5f6ff 0%,
			#c8e3f3 100%,
			#cae4f3 100%,
			#abd7ef 100%
		);
		border-radius: 0px;
		border: 1px solid #b1cee2;
	}
	._content {
		max-height: 439px;
		min-height: 30px;
		//// overflow: auto;
		padding: 0 10px 10px;
		.ant-collapse {
			border: none;
      border-radius: 0;
			._collapse-icon {
				display: inline-block;
				position: relative;
				&._expand {
					transform: rotate(180deg);
				}
			}
		}
    /deep/ .ant-collapse-icon-position-right {
      max-height: 429px;
      min-height: 30px;
      border: 1px solid #d9d9d9;
      overflow: auto;
    }
		/deep/ .ant-collapse-header {
			height: 24px;
			line-height: 24px;
			padding: 0;
			padding-left: 8px !important;
			font-size: 12px;
			background: #f2f2f2;
     
		}
    /deep/ .ant-collapse-item {
      border: 0;
    }
    /deep/ .ant-collapse-content {
      border: 0;
    }
		/deep/ .ant-collapse-content-box {
			padding: 0;
			._item {
				background: white;
				height: 24px;
        line-height: 24px;
        font-size:12px;
				cursor: pointer;

				&:hover {
					background: #3483B8;
          color: #fff;
				}
			}
		}
	}
}
</style>
